<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>管理员登录</title>
        <link th:href="@{/asserts/css/bootstrap.min.css}" href="../../static/asserts/css/bootstrap.min.css"
              rel="stylesheet">
        <link th:href="@{/asserts/css/signin.css}" href="../../static/asserts/css/signin.css" rel="stylesheet">
    </head>

    <body class="text-center">
        <div class="form-signin" action="dashboard.html">
            <img class="mb-4" th:src="@{/img/im_user.png}" src="../../static/img/im_user.png" alt="" width="72"
                 height="72">
            <h1 class="h3 mb-3 font-weight-normal">管理员登录</h1>
            <div class="text-danger text-center mb-2" th:text="${loginMsg}"></div>
            <label class="sr-only">Username</label>
            <input type="text" class="form-control" id="username" name="userNickname" placeholder="USERNAME" required
                   autofocus>
            <label class="sr-only">Password</label>
            <input type="password" class="form-control" id="password" name="userPassword" style="margin-top: 10px"
                   placeholder="PASSWORD" required="">
            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"> 记住我
                </label>
            </div>
            <button onclick="doLogin()" class="btn btn-lg btn-primary btn-block" type="button">登录</button>
            <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
        </div>

        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script type="text/javascript" th:src="@{/asserts/js/popper.min.js}"
                src="../../static/asserts/js/popper.min.js"></script>
        <script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"
                src="../../static/asserts/js/bootstrap.min.js"></script>
        <script th:src="@{/js/bootstrapQ.js}" src='../../static/js/bootstrapQ.js'></script>
        <script type="text/javascript" th:src="@{/asserts/js/feather.min.js}"
                src="../../static/asserts/js/feather.min.js"></script>
        <script>
            feather.replace()
        </script>
        <script th:inline="javascript">
            // 管理员登录
            function doLogin() {
                let req = {};
                req.userNickname = $('#username').val().trim();
                req.userPassword = $('#password').val().trim();

                if (req.userNickname === '') {
                    bootstrapQ.msg({msg: '请输入管理员用户名', type: 'warning', time: 3000});
                    return;
                }

                if (req.userPassword === '') {
                    bootstrapQ.msg({msg: '请输入密码', type: 'warning', time: 3000});
                    return;
                }

                $.ajax({
                    url: /*[[@{/admin/login.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: (response) => {
                        if (response.success) {
                            location.href = /*[[@{/admin}]]*/'';
                        } else {
                            bootstrapQ.msg({msg: response.message, type: 'warning', time: 3000});
                            $('#password').val('');
                        }
                    },
                    error: (error) => {
                        bootstrapQ.msg({msg: '网络异常 => ' + error, type: 'danger', time: 3000});
                    }
                });
            }
        </script>
    </body>
</html>